/* ************************************** 首页的进入、离开动画 ********************************************** */
.home-in-enter-active {
	transition: all 0.3s ease;
	will-change: transform;
	position: absolute;
	top: 0;
	width: 100%;
}
.home-in-enter-from {
	transform: translate3d(-30%, 0, 0);
}
.home-in-enter-to {
	transform: translate3d(0, 0, 0);
}
.home-out-leave-active {
	transition: all 0.3s ease;
	will-change: transform;
	position: absolute;
	top: 0;
	width: 100%;
}
.home-out-leave-from {
	transform: translate3d(0, 0, 0);
}
.home-out-leave-to {
	transform: translate3d(-30%, 0, 0);
}


/* *********************************** 新窗体从右侧进入, 且老窗体被挤压而出 ********************************* */
.page-in-enter-from {
	transform: translate3d(100%, 0, 0);
}
.page-in-enter-to {
	transform: translate3d(0, 0, 0);
}
.page-in-enter-active {
	transition: all 0.3s ease;
	will-change: transform;
	position: absolute;
	top: 0;
	z-index: 99999;
	width: 100%;
}
.page-in-leave-from {
	transform: translate3d(0, 0, 0);
}
.page-in-leave-to {
	transform: translate3d(-30%, 0, 0);
}
.page-in-leave-active {
	transition: all 0.3s ease;
	will-change: transform;
	position: absolute;
	top: 0;
	width: 100%;
}

/* *********************************** 新窗体从左侧进入, 且老窗体被挤压而出 ****************************** */
.page-out-enter-from {
	transform: translate3d(-30%, 0, 0);
}
.page-out-enter-to {
	transform: translate3d(0, 0, 0);
}
.page-out-enter-active {
	transition: all 0.3s ease;
	will-change: transform;
	position: absolute;
	top: 0;
	width: 100%;
}
.page-out-leave-from {
	transform: translate3d(0, 0, 0);
}
.page-out-leave-to {
	transform: translate3d(100%, 0, 0);
}
.page-out-leave-active {
	transition: all 0.3s ease;
	will-change: transform;
	position: absolute;
	top: 0;
	z-index: 99999;
	width: 100%;
}